<template>
  <div id="login">
    <div id="bgd">
      <canvas id="myCanvas" :width="width" :height="height"> </canvas>
    </div>
    <div>
      <el-form
        class="login-box"
        ref="loginForm"
        :model="form"
        :rules="rules"
        status-icon
        label-width="80px"
        v-if="showStatus"
      >
        <h2 class="login-title" style="color: #ffffff">欢迎登录</h2>
        <el-row>
          <el-col :span="2">
            <icon class="iconfont" name="username"></icon>
          </el-col>
          <el-col :span="22">
            <el-form-item label-width="30px" prop="username">
              <el-input
                type="text"
                placeholder="请输入账号"
                v-model="form.username"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <icon class="iconfont" name="password"></icon>
          </el-col>
          <el-col :span="22">
            <el-form-item label-width="30px" prop="password">
              <el-input
                type="text"
                placeholder="请输入密码"
                v-model="form.password"
                show-password
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            class="loginbtn"
            type="primary"
            @click="doLogin('loginForm')"
            >登录</el-button
          >
          <el-button class="loginbtn" type="primary" @click="showStatus = false"
            >无账号，注册</el-button
          >
        </el-form-item>
      </el-form>

      <el-form
        class="login-box"
        ref="loginForm"
        :model="form"
        :rules="rules"
        status-icon
        label-width="80px"
        v-if="!showStatus"
      >
        <h2 class="login-title" style="color: #ffffff">欢迎注册</h2>
        <el-row>
          <el-col :span="2">
            <icon class="iconfont" name="username"></icon>
          </el-col>
          <el-col :span="22">
            <el-form-item label-width="30px" prop="username">
              <el-input
                type="text"
                placeholder="请输入账号"
                v-model="form.username"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <icon class="iconfont" name="password"></icon>
          </el-col>
          <el-col :span="22">
            <el-form-item label-width="30px" prop="password">
              <el-input
                type="text"
                placeholder="请输入密码"
                v-model="form.password"
                show-password
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            class="loginbtn"
            type="primary"
            @click="doRegister('loginForm')"
            >注册</el-button
          >
          <el-button class="loginbtn" type="primary" @click="showStatus = true"
            >已有账号，登录</el-button
          >
        </el-form-item>
      </el-form>

      <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%">
        <span>请输入正确的账号或密码</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    let validPassword = (rule, value, callback) => {
      // let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,10}$/;
      let reg = /[0-9a-zA-Z]{3,10}$/;
      if (!reg.test(value)) {
        callback(new Error("密码必须是由3-10位字母或数字组合"));
      } else {
        callback();
      }
    };
    // { pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母',trigger: 'blur'},
    let validUsername = (rule, value, callback) => {
      let reg = /[0-9a-zA-Z]{1,8}/;
      if (!reg.test(value)) {
        callback(new Error("只可以输入数字或字母(1~8位)"));
      } else {
        callback();
      }
    };
    return {
      canvas: null,
      context: null,
      stars: [], //星星数组
      shadowColorList: [
        "#39f",
        "#ec5707",
        "#b031d4",
        "#22e6c7",
        "#92d819",
        "#14d7f1",
        "#e23c66"
      ], //阴影颜色列表
      directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向
      speed: 50, //星星运行速度
      last_star_created_time: new Date(), //上次重绘星星时间
      Ball: class Ball {
        constructor(radius) {
          this.x = 0;
          this.y = 0;
          this.radius = radius;
          this.color = "";
          this.shadowColor = "";
          this.direction = "";
        }
        draw(context) {
          context.save();
          context.translate(this.x, this.y);
          context.lineWidth = this.lineWidth;
          var my_gradient = context.createLinearGradient(0, 0, 0, 8);
          my_gradient.addColorStop(0, this.color);
          my_gradient.addColorStop(1, this.shadowColor);
          context.fillStyle = my_gradient;
          context.beginPath();
          context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
          context.closePath();
          context.shadowColor = this.shadowColor;
          context.shadowOffsetX = 0;
          context.shadowOffsetY = 0;
          context.shadowBlur = 10;
          context.fill();
          context.restore();
        }
      }, //工厂模式定义Ball类
      width: window.innerWidth,
      height: window.innerHeight,
      form: {
        username: "",
        password: ""
      },

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          { required: true, message: "账号不可为空", trigger: "blur" },
          { validator: validUsername, trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
          { validator: validPassword, trigger: "blur" }
        ]
      },
      // 对话框显示和隐藏
      dialogVisible: false,
      showStatus: true
    };
  },
  methods: {
    //登录
    doLogin(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .get("http://1.117.99.174:8080/newsmap/user/login", {
              params: {
                username: that.form.username,
                password: that.form.password
              }
            })
            .then(function(response) {
              if (response.data.code == 200) {
                console.log(response.data);
                let id = response.data.data[0];
                localStorage.setItem("id", id);
                localStorage.setItem("username", that.form.username);
                localStorage.setItem("password", that.form.password);
                localStorage.setItem("headimg", response.data.files);
                localStorage.setItem("phone", response.data.count);
                that.$message({
                  showClose: true,
                  message: "登录成功",
                  type: "success"
                });
                that.$router.push("/home");
              } else {
                // console.log(response.data)
                // let msg = response.data.msg;
                that.$message({
                  showClose: true,
                  message: "登录失败(账号或密码错误)",
                  type: "warning"
                });
              }
            })
            .catch(function(error) {
              console.log(error);
              that.$message({
                showClose: true,
                message: "请输入正确的账号或密码",
                type: "warning"
              });
            });
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    },
    //注册
    doRegister(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .get("http://1.117.99.174:8080/newsmap/user/register", {
              params: {
                username: this.form.username,
                password: this.form.password
              }
            })
            .then(function(response) {
              if (response.data.code == 200) {
                console.log(response.data);
                that.showStatus = true;
                // localStorage.setItem("username", that.form.username);
                // localStorage.setItem("password", that.form.password);
                // localStorage.setItem("headimg", "");
                that.$message({
                  showClose: true,
                  message: "注册成功,请登录",
                  type: "success"
                });
                // that.$router.push("/home");
              } else {
                that.$message({
                  showClose: true,
                  message: "注册失败:" + response.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    },
    //重复动画
    drawFrame() {
      let animation = requestAnimationFrame(this.drawFrame);
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.createStar(false);
      this.stars.forEach(this.moveStar);
    },
    //展示所有的星星
    createStar(params) {
      let now = new Date();
      if (params) {
        //初始化星星
        for (var i = 0; i < 50; i++) {
          const radius = Math.random() * 3 + 2;
          let star = new this.Ball(radius);
          star.x = Math.random() * this.canvas.width + 1;
          star.y = Math.random() * this.canvas.height + 1;
          star.color = "#ffffff";
          star.shadowColor = this.shadowColorList[
            Math.floor(Math.random() * this.shadowColorList.length)
          ];
          star.direction = this.directionList[
            Math.floor(Math.random() * this.directionList.length)
          ];
          this.stars.push(star);
        }
      } else if (!params && now - this.last_star_created_time > 3000) {
        //每隔3秒重绘修改颜色其中30个球阴影颜色
        for (var i = 0; i < 30; i++) {
          this.stars[i].shadowColor = this.shadowColorList[
            Math.floor(Math.random() * this.shadowColorList.length)
          ];
        }
        this.last_star_created_time = now;
      }
    },
    //移动
    moveStar(star, index) {
      if (star.y - this.canvas.height > 0) {
        //触底
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "leftTop";
        } else {
          star.direction = "rightTop";
        }
      } else if (star.y < 2) {
        //触顶
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "rightBottom";
        } else {
          star.direction = "leftBottom";
        }
      } else if (star.x < 2) {
        //左边
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "rightTop";
        } else {
          star.direction = "rightBottom";
        }
      } else if (star.x - this.canvas.width > 0) {
        //右边
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "leftBottom";
        } else {
          star.direction = "leftTop";
        }
      }
      if (star.direction === "leftTop") {
        star.y -= star.radius / this.speed;
        star.x -= star.radius / this.speed;
      } else if (star.direction === "rightBottom") {
        star.y += star.radius / this.speed;
        star.x += star.radius / this.speed;
      } else if (star.direction === "leftBottom") {
        star.y += star.radius / this.speed;
        star.x -= star.radius / this.speed;
      } else if (star.direction === "rightTop") {
        star.y -= star.radius / this.speed;
        star.x += star.radius / this.speed;
      }
      star.draw(this.context);
    }
  },

  mounted() {
    this.canvas = document.getElementById("myCanvas");
    this.context = this.canvas.getContext("2d");
    this.createStar(true);
    this.drawFrame();
  }
};
</script>

<style lang="less" scoped>
#login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: #242645;
  color: #fff;
  font-family: "Source Sans Pro";
  background-size: 100%;
  background-image: url("../../assets/images/Starry.jpg");
  position: relative;
  #bgd {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
  .login-box {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    border: 1px solid #dcdfe6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    box-shadow: 0 0 25px #909399;
    // box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    opacity: 1;
    background: linear-gradient(
      230deg,
      rgba(16, 36, 122, 0) 0%,
      rgb(59, 58, 63) 100%
    );
    color: #fff;

    .login-title {
      text-align: center;
      margin: 0 auto 40px auto;
      color: #303133;
    }
    .iconfont {
      width: 2.5em;
      height: 2.5em;
      fill: currentColor; //此属性为更改svg颜色属性设置
      overflow: hidden;
    }
  }
}
</style>
